/******************** 变量 ********************/
$lv-inputip-normal-border-color: $border-color-base !default;
$lv-inputip-hover-border-color: $border-color-hover !default;
$lv-inputip-focus-border-color: $border-color-active !default;
$lv-inputip-disabled-border-color: $border-color-disabled !default;

$lv-inputip-normal-bg-color: $input-background !default;
$lv-inputip-disabled-bg-color: $disabled-background !default;

$lv-inputip-disabled-text-color: $text-color-disabled !default;
$lv-inputip-large-height: $height-lg;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-input-ip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 1.76rem;
  padding: 0 $padding-xs;
  color: $text-color;
  font-size: $font-size-base;
  line-height: $line-height-coeff;
  background: $lv-inputip-normal-bg-color;
  border: $border-width-base $border-style-base $lv-inputip-normal-border-color;
  border-radius: $border-radius-md;
  height: $height-base;
  @include motion-state;

  input {
    display: inline-block;
    flex: 1 1 auto;
    width: 100%;
    height: 0.22rem;
    color: $input-ip-text-color;
    font-size: $font-size-base;
    line-height: $line-height-base;
    text-align: center;
    background: $lv-inputip-normal-bg-color;
    border: 0;

    &:focus {
      outline: 0;
    }

    &[disabled] {
      color: $lv-inputip-disabled-text-color;
      cursor: not-allowed;
    }
  }

  span {
    display: inline-block;
    flex: 0 0 auto;
    color: $input-ip-separator-color;
    line-height: 0.22rem;

    &.lv-colon-separator {
      font-size: $font-size-base;
      font-weight: $font-weight-bold;
      color: $text-color-secondary;
    }
  }

  &.lv-input-ip-large {
    height: $lv-inputip-large-height;
  }

  &.lv-input-ipv6 {
    width: 4.64rem;
  }

  &.lv-input-ip-block,
  &.lv-input-ip-block.lv-input-ipv6,
  &.lv-input-ip-block.lv-input-ipv4-port:not(.lv-input-ipv6) {
    width: 100%;
  }

  &.lv-input-ipv4-port:not(.lv-input-ipv6) {
    width: 2.72rem;

    input:last-child {
      min-width: 0.56rem;
    }
  }

  &:not([disabled]):not(.lv-input-ip-focus):hover {
    border-color: $lv-inputip-hover-border-color;
  }

  &.lv-input-ip-focus {
    border-color: $lv-inputip-focus-border-color;
  }

  &[disabled] {
    background-color: $lv-inputip-disabled-bg-color;
    border-color: $lv-inputip-disabled-border-color;
    cursor: not-allowed;

    span {
      color: $lv-inputip-disabled-text-color;
    }
  }
}